/**
 * Created by Administrator on 2017/3/21.
 */
import React, {Component} from 'react';
import { Form, Input, DatePicker, Select, Breadcrumb,  Divider,BackTop } from 'antd';
import {connect} from 'dva';
import 'braft-editor/dist/index.css'
import Zmage from 'react-zmage';
import request from '@/utils/request';
import party_top from '../../images/safe_top.jpg';
import styles from './homePage.less';
import blue_styles from './../ValveFlowMeterSIte/index.less';
import ixintu from '../../images/ixintu.png';
import red_list_blue from '@/images/red_list_blue.gif';

class AddPoliciesForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      all_roles:[],
      html:'',
      data:{},
      counters:0,
      recommendData:[],
      readList:localStorage.getItem('readList')?JSON.parse(localStorage.getItem('readList')):[],
    };
  }
  componentDidMount() {

    const that=this;
    console.log(this.props.history.location)
    const pathname =this.props.history.location.pathname
    request(`/counters/${pathname.split('/')[pathname.split('/').length-1]}`, {
      method: 'GET',
    }).then((response) => {
      if (response.status === 200) {
        that.setState({
          counters:response.data.data.count
        });
      }
    });
    request(`/articles/${pathname.split('/')[pathname.split('/').length-1]}`, {
      method: 'GET',
    }).then((response) => {
      if (response.status === 200) {
        that.setState({
          data:response.data.data
        },function() {
          that.getRecommend()
          document.title=this.state.data.title
        });
      }
    });
  }
  getRecommend=()=>{
    const that=this;
    const type=this.state.data.type;
    if(type.length>0){
      request(`/articles`, {
        method: 'GET',
        params:{
          order_direction:'desc',
          type:type[0],
          per_page:5
        }
      }).then((response) => {
        if (response.status === 200) {
          that.setState({
            recommendData: response.data.data,
          });
        }
      });
    }
  }
  saveRead=(item)=>{
    if(this.state.readList.indexOf(item.id)<0){
      let readList = [...this.state.readList]
      readList.push(item.id)
      const that=this;
      setTimeout(function() {
        that.setState({
          readList:readList
        },function() {
          localStorage.setItem('readList',JSON.stringify(that.state.readList))
        })
      },0)
    }
  }
  renderType=(value)=>{
    let map=[{id:21,name:'首页轮播'},{id:22,name:'安全要闻'},{id:23,name:'政策法规'},{id:24,name:'安全教育'},{id:25,name:'事故通报'},
      {id:26,name:'安全通知'}];
    for(let i=0;i<map.length;i++){
      if(Number(value)===map[i].id){
        return map[i].name
      }
    }
  }
  render() {



    return (
      <div style={{width:'100%',minHeight:'100vh',background:'#0f92d6'}}>
        <div
          style={{ display:'flex',minHeight:'100vh',background:'#fff',flexDirection:'column',overflow: 'auto',
            padding:'15px',
            maxWidth: 1100, margin: '0 auto' }}>
          <div>
            <img style={{ width: '100%', height: 'auto' }} src={party_top} alt=""/>
          </div>
          <div style={{fontSize:'16px',padding:'10px 20px',color:'#333'}}>
            <span onClick={()=>{
              window.open(`http://${window.location.host}/safety_product_homepage`);
            }} className={styles.hover}>首页</span>
            <span> > </span>
            <span onClick={()=>{
              window.open(`http://${window.location.host}/safety_list/${this.state.data.type[0]}`);
            }} className={styles.hover}>{this.state.data.type&&this.renderType(this.state.data.type[0])}</span>
            <span> > </span>
            <span style={{fontWeight:'bold'}}> {this.state.data.title} </span>
          </div>
          <h2 style={{width:'80%',margin:'5px auto',textAlign:'center',fontWeight:'bold',fontSize:'30px'}}>{this.state.data.title}</h2>
          <div  style={{width:'90%',margin:'5px auto',textAlign:'center',fontSize:'16px',color:'#333'}}>
            <span style={{marginRight:'20px'}}>发布时间 : {this.state.data.date}</span>
            {
              this.state.data.reprinted_source?
                <span style={{marginRight:'20px'}}>来源 : {this.state.data.reprinted_source}</span>:''
            }
            <span >阅读 : {this.state.counters}次</span>
            <Divider style={{marginTop:'5px',marginBottom:'5px'}}/>
          </div>


          <div   className={styles.detailImgWrap}  style={{flex:'1',
            padding:'10px 20px',fontSize:'16px'}}
                 dangerouslySetInnerHTML={{ __html:this.state.data.content}}></div>
          <div style={{borderBottom:'3px solid #007bff'}}>
            <div style={{background:'#007bff',color:'#fff',padding:'8px 12px',display:'inline-block',fontSize:'16px'}}> 相关推荐</div>
          </div>
          {this.state.recommendData.map((item,index)=>{
            return <div  key={index} className={styles.home_info_item2}>
              <div className={styles.item_img}>
                <img src={red_list_blue} alt=""/>
              </div>
              <div onClick={()=>{
                this.saveRead(item)
                window.open(`http://${window.location.host}/safety_article/${item.id}`);
              }} className={styles.item_content}  style={{color:this.state.readList.indexOf(item.id)>=0?'rgb(117 28 199)':''}}>{item.tag&&<span
                style={{ color: '#0068cd' }}>[{item.tag}] </span>} {item.title}
              </div>
              <div className={styles.item_data}>{item.date}</div>
            </div>
          })}
         {/* <div style={{marginTop:'16px'}}>
            <img style={{ width: '100%', height: 'auto' }} src={ixintu} alt=""/>
          </div>*/}
        </div>
        <BackTop />
      </div>
    );
  }
}

const AddPoliciesFormWrap = Form.create()(AddPoliciesForm);
export default connect()(AddPoliciesFormWrap);


